<template>
    <div class="main-wrapper">
        <div class="filter-container">
            <el-input v-model="listQuery.director" placeholder="负责人姓名" class="filter-item"
                @keyup.enter.native="handleFilter" />
            <el-select v-model="listQuery.status" placeholder="状态" clearable class="filter-item">
                <el-option v-for="(value, key) in status" :key="key" :label="value" :value="key" />
            </el-select>
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
                查询
            </el-button>
        </div>

        <el-table v-loading="listLoading" :data="list" border fit highlight-current-row>
            <el-table-column label="负责人姓名" align="center">
                <template slot-scope="{ row }">
                    {{ row.director }}
                </template>
            </el-table-column>
            <el-table-column label="联系方式" align="center">
                <template slot-scope="{ row }">
                    {{ row.phoneNo }}
                </template>
            </el-table-column>
            <el-table-column label="合作地区" align="center">
                <template slot-scope="{ row }">
                    {{ row.provinceName }}{{ row.cityName }}
                </template>
            </el-table-column>
            <el-table-column label="其他信息" align="center" width="300">
                <template slot-scope="{ row }">
                    {{ row.remark }}
                </template>
            </el-table-column>
            <el-table-column label="加盟费" align="center">
                <template slot-scope="{ row }">
                    {{ row.agentMoney | amountFilter }}
                </template>
            </el-table-column>
            <el-table-column label="提交时间" width="150" align="center">
                <template slot-scope="{ row }">
                    <span>{{ row.createTime | timeFilter('{y}-{m}-{d} {h}:{i}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="状态" align="center" width="98">
                <template slot-scope="{ row }">
                    <el-tag :type="row.status | styleFilter()">{{
                    statusData[row.status].title
                    }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="提交人" align="center">
                <template slot-scope="{ row }">
                    {{ row.userName }}
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" max-width="160">
                <template slot-scope="{ row }">
                    <el-button v-if="row.status === 0" class="row-btn" type="warning" size="mini"
                        @click="openVerifyForm(row)">
                        结算
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="listQuery.pageNo" :limit.sync="listQuery.pageSize"
            @pagination="fetchList" />

        <el-dialog title="项目确认" width="400px" :visible.sync="dialogEditVisible">
            <template #title>
                {{ verifyForm.name }}
            </template>
            <el-form ref="verifyForm" :model="verifyForm" label-position="right" label-width="100px">
                <el-form-item label="加盟费" :rules="[
                  { required: true, message: '请准确填写加盟费', trigger: 'blur' },
                ]">
                    <el-input v-model="verifyForm.agentMoney" style="width: 80%">
                        <template #suffix> 元 </template>
                    </el-input>
                </el-form-item>
                <el-form-item label="操作" prop="status">
                    <el-radio-group v-model="verifyForm.status">
                        <el-radio :label="1">结算加盟费</el-radio>
                        <el-radio :label="2" style="color: red">取消合作申请</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleVerify()">提交</el-button>
                <el-button @click="dialogEditVisible = false">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getBranchApplyList, verifyBranchApply } from '@/api/agentBranch'
import { parseTime, smallToBig } from '@/utils'

import Pagination from '@/components/Pagination'

export default {
    name: 'Project',
    components: {
        Pagination,
    },
    filters: {
        styleFilter (style) {
            const styleMap = { 0: 'warning', 1: 'success', 2: 'danger' }
            return styleMap[style]
        },
        timeFilter (time, format) {
            return parseTime(time, format)
        },
        amountFilter (value, currency = '元', decimals = 0) {
            const digitsRE = /(\d{3})(?=\d)/g
            value = parseFloat(value)
            if (!value && value !== 0) return '-'
            const stringified = Math.abs(value).toFixed(decimals)
            const $int = decimals ? stringified.slice(0, -1 - decimals) : stringified
            const i = $int.length % 3
            const head = i > 0 ? $int.slice(0, i) + ($int.length > 3 ? ',' : '') : ''
            const $float = decimals ? stringified.slice(-1 - decimals) : ''
            const sign = value < 0 ? '-' : ''
            return `${sign}${head}${$int
                .slice(i)
                .replace(digitsRE, '$1,')}${$float} ${currency}`
        },
    },
    data () {
        return {
            statusData: {
                0: {
                    title: '待确认',
                },
                1: {
                    title: '已结算',
                },
                2: {
                    title: '已取消',
                },
                5: {
                    title: '已结算',
                },
            },
            list: null,
            total: 0,
            listLoading: true,
            listQuery: {
                pageNo: 1,
                pageSize: 20,
            },
            selectedProject: null,
            dialogEditVisible: false,
            status: [],
            verifyForm: {},
        }
    },
    computed: {},
    created () {
        this.fetchList()
    },
    methods: {
        fetchList () {
            this.listLoading = true
            getBranchApplyList({}).then((response) => {
                this.list = response.data.items
                this.total = response.data.total
                this.listLoading = false
            })
        },
        handleFilter () {
            this.listQuery.pageNo = 1
            this.fetchList()
        },
        getDisplayString (str) {
            return str || ' - '
        },
        openVerifyForm (row) {
            this.verifyForm = { ...row }
            this.verifyForm.status = 1
            this.dialogEditVisible = true
        },
        handleVerify () {
            //smallToBig
            this.$confirm(
                `<div>已收到加盟费: <span style="color: red">￥ ${this.verifyForm.agentMoney || 0}</span></div><div><span style="color: red;padding-left: 95px">${smallToBig(this.verifyForm.agentMoney)}</span></div>`,
                '提交后无法修改,请确认无误后点击确认',
                {
                    dangerouslyUseHTMLString: true,
                    confirmButtonText: '结算',
                    cancelButtonText: '取消',
                }
            )
                .then(() => {
                    verifyBranchApply(this.verifyForm)
                        .then(res => {
                            this.$notify({
                                title: '提交成功',
                                type: 'success',
                                duration: 2000
                            })
                            this.dialogEditVisible = false
                            this.fetchList()
                        })
                        .catch(err => {
                            this.$message.error(err.message)
                        })
                })
                .catch((err) => {

                })
        },
    },
}
</script>
<style lang="scss" scoped>
.main-wrapper {
    margin: 8px;

    .filter-container {
        padding: 10px 0;

        .filter-item {
            width: 200px;
            margin-right: 10px;
        }
    }

    .dialog-footer {
        text-align: center;
    }

    .row-btn {
        margin: 2px 2px;
    }
}
</style>